<!DOCTYPE html>
<html>
<head>
    <title>Animation Test</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 10px;
            animation: bounce 2s infinite;
        }

        .paused {
            animation-play-state: paused;
        }

        @keyframes bounce {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
            }
        }

        body {
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .controls {
            position: fixed;
            top: 20px;
            left: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .timestamp {
            font-family: monospace;
            font-size: 20px;
            margin-bottom: 10px;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background: #4ecdc4;
            color: white;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
        }

        button:hover {
            background: #45b7ae;
        }

        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            width: 200px;
        }

        input:focus {
            outline: none;
            border-color: #4ecdc4;
        }

        .message {
            color: #666;
            font-size: 14px;
            margin-top: 5px;
            min-height: 20px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <div class="timestamp" id="timestamp">0.0s</div>
        <button id="toggleBtn">Pause</button>
        <input 
            type="text" 
            id="messageInput" 
            placeholder="Type a message..."
        >
        <div class="message" id="message"></div>
    </div>
    <div class="box"></div>

    <script>
        // Elements
        const box = document.querySelector('.box');
        const toggleBtn = document.getElementById('toggleBtn');
        const messageInput = document.getElementById('messageInput');
        const messageDisplay = document.getElementById('message');
        const timestampEl = document.getElementById('timestamp');

        // State
        const start = Date.now();
        let isPaused = false;

        // Toggle animation
        toggleBtn.addEventListener('click', () => {
            isPaused = !isPaused;
            box.classList.toggle('paused', isPaused);
            toggleBtn.textContent = isPaused ? 'Resume' : 'Pause';
        });

        // Update message
        messageInput.addEventListener('input', (e) => {
            messageDisplay.textContent = e.target.value;
        });

        // Update timestamp
        function updateTimestamp() {
            const elapsed = (Date.now() - start) / 1000;
            timestampEl.textContent = elapsed.toFixed(1) + 's';
            requestAnimationFrame(updateTimestamp);
        }
        
        updateTimestamp();
    </script>
</body>
</html> 